<template>
  <table id="items" cellspacing="1" style="width: 100%; height: 100px; border: 1px solid #a8aeb2">
    <tr class="tr">
      <th class="thc">序号</th>
      <th class="tha" colspan="2">实验项目</th>
      <th class="thb">标准规定指标</th>
      <th class="thb">检测结果</th>
      <th class="thd">单项判定</th>
      <th class="the">检验方法</th>
      <th class="the">操作</th>
    </tr>
    <template v-for="(item, index) in labEntrustItemsList" :key="item.id">
      <tr class="tr" v-if="item.reportMark === '1'">
        <th class="thc">{{ index + 1 }}</th>
        <td
          class="tha"
          style="text-align: left; padding-left: 10px"
          v-if="shouldMergeRow(item, index)"
          :colspan="item.indexName == '' || item.indexName == null ? 2 : 0"
          :rowspan="getMergedRowCount(item, index)"
        >
          {{ item.itemsBasisName }}
        </td>
        <!-- <td class="tha" v-else style="text-align: left; padding-left: 10px" :colspan="item.indexName == '' ? 2 : 0">{{ item.itemName }}</td> -->
        <td class="tha" v-if="item.indexName != '' && item.indexName != null">
          {{ item.indexName }}
        </td>
        <td class="thb">
          <a-textarea v-model:value="item.indexBasis" size="large" class="input" />
        </td>
        <td class="thb">
          <a-textarea v-model:value="item.itemResult" size="large" class="input" />
        </td>
        <td class="thd">
          <!-- <a-input v-model:value="item.itemDecide" size="large" class="input"/> -->
          <a-select v-model:value="item.itemDecide" :dropdown-match-select-width="false" size="large" class="input">
            <a-select-option value="合格">合格</a-select-option>
            <a-select-option value="不合格">不合格</a-select-option>
          </a-select>
        </td>
        <td class="the">
          {{ item.basisNum }}
        </td>
        <td class="the" v-if="shouldMergeRow(item, index)" :rowspan="getMergedRowCount(item, index)">
          <a-popconfirm title="确认删除?" ok-text="是" cancel-text="否" @confirm="confirm(item)">
            <a href="#" class="deleteBtn">删除</a>
          </a-popconfirm>
        </td>
      </tr>
    </template>
  </table>
</template>

<script lang="ts" setup>
  import { defineProps, defineExpose } from 'vue';

  const props = defineProps<{
    labEntrustItemsList: [
      {
        id: string;
        taskId: string;
        itemId: string;
        itemName: string;
        indexName: string;
        indexBasis: string;
        itemResult: string;
        itemDecide: string;
        basisNum: string;
        reportMark: string;
        itemsBasisName:string;
      }
    ];
  }>();
  const emits = defineEmits(['deleteItem']);
  // 判断是否合并
  const shouldMergeRow = (item, index) => {
    // 判断是否需要合并行
    if (
      index > 0 &&
      item.itemId === props.labEntrustItemsList[index - 1].itemId &&
      item.taskItemsId === props.labEntrustItemsList[index - 1].taskItemsId
    ) {
      return false;
    }
    return true;
  };

  const getMergedRowCount = (item, index) => {
    // 获取合并行的数量
    let count = 1;
    for (let i = index + 1; i < props.labEntrustItemsList.length; i++) {
      if (item.itemId === props.labEntrustItemsList[i].itemId && item.taskItemsId === props.labEntrustItemsList[i].taskItemsId) {
        count++;
      } else {
        break;
      }
    }
    return count;
  };
  //确认删除该条数据
  const confirm = (record) => {
    emits('deleteItem', record);
  };
  defineExpose({
    props,
  });
</script>

<style scoped>
  .div {
    height: 45px;
    border: 1px solid #a8aeb2;
    background-color: #d2d5d6;
    text-align: left;
    font: 1.1em sans-serif;
    line-height: 45px;
  }

  .tr {
    height: 50px;
    border: 1px solid #a8aeb2;
  }
  .tha {
    width: 15%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
  }
  .thb {
    width: 12%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
  }
  .thc {
    width: 5%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
  }
  .thd {
    width: 12%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
  }
  .the {
    width: 13%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
  }
  

  .input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
    font: 1em sans-serif;
  }
  .deleteBtn {
    color: #cc1414;
  }
</style>
